<template>
  <div class="hello">
    <h2>单选框</h2>
    <p>{{ radio }}</p>
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio disabled v-model="radio" label="2">备选项</el-radio>
    <el-radio v-model="radio" label="3">备选项</el-radio>

    <div>
      <el-radio-group v-model="radio1">
        <el-radio-button label="男"></el-radio-button>
        <el-radio-button label="女"></el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group @change="abc" text-color="#fff" fill="green" v-model="radio2" size="medium">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="radio3" size="small">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京" disabled></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>
    <!-- <el-container>
      <el-main>
        <el-row :gutter="10">
          <el-col :span="4">
            <div class="dh">左侧导航</div>
          </el-col>
          <el-col :span="11">
            <div class="lb">轮播图</div>
            <div class="lb2">轮播图</div>
          </el-col>
          <el-col :span="3">
            <div class="gg">广告位</div>
            <div class="gg2">广告位</div>
          </el-col>
          <el-col :span="6">
            <div class="hi">Hi! 你好</div>
          </el-col>
        </el-row>

        <el-row :gutter="10" class="gz0">
          <el-col :span="4">
            <div class="gz">格子1</div>
          </el-col>
          <el-col :span="4">
            <div class="gz">格子2</div>
          </el-col>
          <el-col :span="4">
            <div class="gz">格子3</div>
          </el-col>
          <el-col :span="4">
            <div class="gz">格子4</div>
          </el-col>
          <el-col :span="4">
            <div class="gz">格子5</div>
          </el-col>
          <el-col :span="4">
            <div class="gz">格子6</div>
          </el-col>
        </el-row>

        <el-row class="qc">
          清仓
        </el-row>

        <el-row :gutter="10" class="tjz">
          <el-col :span="12">
            <div class="tj">每日好店</div>
          </el-col>
          <el-col :span="12">
            <div class="tj">淘宝直播</div>
          </el-col>
        </el-row>

      </el-main>
    </el-container>-->

    <h2>按钮 disabled</h2>
    <p>
      <!-- <el-button v-model="bool" @click="btn2">勾选协议</el-button> -->
      <el-checkbox v-model="bool" >同意注册协议</el-checkbox>
      <!-- <el-button @click="btn2" type="primary" size="mini">按钮</el-button>勾选协议 -->
    </p>
    <el-button type="success" :disabled="!bool" @click="btn">立即注册</el-button>

    <!-- <h2>按钮</h2>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="primary" icon="el-icon-edit" circle></el-button>
    <el-button>默认按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
    <el-button type="info">信息按钮</el-button>

    <h2>icon</h2>
    <i class="el-icon-star-off"></i>
    <i class="el-icon-video-camera-solid"></i>
    <el-button type="primary" icon="el-icon-s-promotion"></el-button> -->

    <!-- <h2>两栏</h2>
    <el-row>
      <el-col :span="12">12</el-col>
      <el-col :span="12">12</el-col>
    </el-row>

    
    <h2>六栏</h2>
    <el-row>
      <el-col :span="4">4</el-col>
      <el-col :span="4">4</el-col>
      <el-col :span="4">4</el-col>
      <el-col :span="4">4</el-col>
      <el-col :span="4">4</el-col>
      <el-col :span="4">4</el-col>
    </el-row>-->

    <!-- <h2>布局</h2> -->
    <!-- <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>-->

    <!-- <h2>分栏</h2>
    <el-container>
      <el-main>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="span">6</div>
        </el-col>
        <el-col :span="9">
          <div class="span">6</div>
        </el-col>
        <el-col :span="5">
          <div class="span">6</div>
        </el-col>
        <el-col :span="6">
          <div class="span">6</div>
        </el-col>
      </el-row>
      </el-main>
    </el-container>-->
  </div>
</template>


<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      bool: true,
      radio: "1",
      radios: "",
      radio1: "上海",
      radio2: "上海",
      radio3: "上海",
      radio4: "上海",
    };
  },
  methods: {
    btn() {
      alert("注册成功");
    },
    btn2() {
      this.bool = !this.bool;
    },
    abc(e) {
      console.log(e);
      console.log(this.radio2);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .el-col {
  outline: 1.5px solid #fff;
} */
/* .span {
  background: green;
  color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} */
* {
  font-size: 20px;
  text-align: center;
}
.dh,
.lb,
.lb2,
.gg,
.gg2,
.hi {
  color: #000;
  background: lightblue;
}
.dh {
  height: 500px;
  line-height: 500px;
}
.lb {
  height: 290px;
  margin-bottom: 10px;
  line-height: 290px;
}
.lb2 {
  height: 200px;
  line-height: 200px;
}
.gg {
  height: 290px;
  margin-bottom: 10px;
  line-height: 290px;
}
.gg2 {
  height: 200px;
  line-height: 200px;
}
.hi {
  height: 500px;
  line-height: 500px;
}
.gz {
  height: 250px;
  background: #6d6d6d;
  line-height: 250px;
}
.gz0 {
  margin-top: 10px;
}
.qc {
  background: rgb(224, 218, 218);
  height: 80px;
  line-height: 80px;
  margin-top: 10px;
}
.tjz {
  margin-top: 10px;
}
.tj {
  background: lightsalmon;
  height: 350px;
  line-height: 350px;
}
.ts {
  background: chartreuse;
}
</style>